import React from 'react';
import { Tag, Divider } from 'antd';
import { ClockCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
import MarkdownEditor from '@/components/MDEditor';
import { Problem } from '@/types/problem';
import styles from './ProblemDescription.module.css';
import { getDifficultyTag } from '@/utils/difficulty';
import { getTagColor } from '@/utils/tags';

interface ProblemDescriptionProps {
  problem: Problem | null;
  loading?: boolean;
}

const ProblemDescription: React.FC<ProblemDescriptionProps> = ({ problem}) => {
  if (!problem) return null;
  
  return (
    <div className={styles.problemContent}>
      <div className={styles.problemTitle}>
        <span className={styles.problemId}>{problem._id}</span>
        {problem.title}
        <span className={styles.problemDifficulty}>
          {getDifficultyTag(problem.difficulty)}
        </span>
      </div>
      
      <div className={styles.problemInfo}>
        <span><ClockCircleOutlined /> 时间限制: {problem.time_limit} ms</span>
        <span><ThunderboltOutlined /> 内存限制: {problem.memory_limit} MB</span>
      </div>
      
      {problem.tags && problem.tags.length > 0 && (
        <div className={styles.problemTags}>
          {problem.tags.map((tag: any, index) => {
            const tagName = typeof tag === 'object' && tag.name ? tag.name : tag;
            return (
              <Tag 
                key={index} 
                color={getTagColor(tagName)}
              >
                {tagName}
              </Tag>
            );
          })}
        </div>
      )}
      
      <Divider />
      
      <div className={styles.problemDescription}>
      <div className={styles.sampleTitle}>题目描述</div>
        <MarkdownEditor
          value={problem.description}
          preview="preview"
          readOnly
          height={400}
        />
      </div>
      
      {problem.input_description && (
        <div className={styles.sampleSection}>
          <div className={styles.sampleTitle}>输入描述:</div>
          <MarkdownEditor
            value={problem.input_description}
            preview="preview"
            readOnly
            height={200}
          />
        </div>
      )}
      
      {problem.output_description && (
        <div className={styles.sampleSection}>
          <div className={styles.sampleTitle}>输出描述:</div>
          <MarkdownEditor
            value={problem.output_description}
            preview="preview"
            readOnly
            height={200}
          />
        </div>
      )}
      
      {problem.samples && problem.samples.length > 0 && (
        <div className={styles.sampleSection}>
          <div className={styles.sampleTitle}>输入输出样例:</div>
          {problem.samples.map((sample, index) => (
            <div key={index}>
              <div className={styles.sampleTitle}>输入 {index + 1}:</div>
              <pre className={styles.sampleBox}>{sample.input}</pre>
              <div className={styles.sampleTitle}>输出 {index + 1}:</div>
              <pre className={styles.sampleBox}>{sample.output}</pre>
            </div>
          ))}
        </div>
      )}
      
      {problem.hint && (
        <div className={styles.problemHint}>
          <div className={styles.sampleTitle}>提示:</div>
          <MarkdownEditor
            value={problem.hint}
            preview="preview"
            readOnly
            height={200}
          />
        </div>
      )}
    </div>
  );
};

export default ProblemDescription; 